<!--  -->
<template>
  <div>
    <el-dialog
      title="中压注册用户新增"
      :visible.sync="show"
      v-if="show"
      width="70%"
      :close-on-click-modal="false"
      :before-close="handleClose"
      v-dialogDrag
    >
        <el-scrollbar :style="'height:'+screenHeight+'px;'">
            <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="140px" class="addForm" size="medium">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="线段编码" prop="xdbm">
                            <el-input v-model="addForm.xdbm" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="用户编码" prop="nextyhbm">
                            <el-row>
                                <el-col :span="10"><el-input v-model="preyhbm" disabled></el-input></el-col>
                                <el-col :span="1" class="center"></el-col>
                                <el-col :span="13"><el-input v-model="addForm.nextyhbm"></el-input></el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="地区特征" prop="dqtzm">
                            <el-select v-model="addForm.dqtzm" placeholder="请选择" @change="dqtzChange">
                                <el-option v-for="item in dqtzOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="行政区划" prop="xzqh">
                            <el-row>
                                <el-col :span="16">
                                    <el-input v-model="addForm.xzqh" disabled></el-input>
                                </el-col>
                                <el-col :span="8" class="selectXzqh">
                                    <el-button type="primary" @click="selectXzqh">选择</el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="投运日期" prop="tyrq">                      
                            <el-date-picker v-model="addForm.tyrq" type="date" :picker-options="pickerDate" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="是否双电源" prop="issdy">
                            <el-select v-model="addForm.issdy" placeholder="请选择">
                                <el-option v-for="item in issdyOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="变压器台数" prop="bts">
                            <el-input v-model="addForm.bts" :disabled="addForm.yhxzm != '2'"></el-input>
                        </el-form-item>
                        <el-form-item label="专用设备台数" prop="zysbs">
                            <el-input v-model="addForm.zysbs" :disabled="addForm.yhxzm != '2'"></el-input>
                        </el-form-item>
                        <el-form-item label="低压用户数" prop="dyyhs">
                            <el-input v-model="addForm.dyyhs"></el-input>
                        </el-form-item>
                        <el-form-item label="载容比" prop="zrb">
                            <el-input v-model="addForm.zrb"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" class="center"></el-col>
                    <el-col :span="11">
                        <el-form-item label="线段名称" prop="xdmc">
                            <el-input v-model="addForm.xdmc" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="用户名称" prop="yhmc">
                            <el-input v-model="addForm.yhmc"></el-input>
                        </el-form-item>
                        <el-form-item label="规划特征" prop="ghtz">
                            <el-select v-model="addForm.ghtz" placeholder="请选择">
                                <el-option v-for="item in ghtzOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="用户性质" prop="yhxzm">
                            <el-select v-model="addForm.yhxzm" placeholder="请选择" @change="yhxzChange">
                                <el-option v-for="item in yhxzOptions" :key="item.value" :label="item.text" :value="item.value">
                                    <span class="txt">{{ item.text }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="注册日期" prop="zcrq">
                            <el-date-picker v-model="addForm.zcrq" type="date" :picker-options="pickerDate" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="双电源容量(kVA)" prop="sdyrl">
                            <el-input v-model="sdyrl" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="变压器容量(kVA)" prop="brl">
                            <el-input v-model="addForm.brl"></el-input>
                        </el-form-item>
                        <el-form-item label="专用设备容量(kVA)" prop="zysbr">
                            <el-input v-model="addForm.zysbr" :disabled="addForm.yhxzm != '2' || addForm.zysbs == '0'"></el-input>
                        </el-form-item>
                        <el-form-item label="用户总容量(kVA)" prop="zrl">
                            <el-input v-model="zrl" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="用户描述" prop="yhms">
                            <el-input v-model="addForm.yhms"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-scrollbar>
        <span slot="footer">
            <el-button @click="confirm" type="primary" size="medium">确 定</el-button>
            <el-button @click="handleClose" size="medium">取 消</el-button>
        </span>
    </el-dialog>
    <!-- 选择行政区划 -->
    <GetXzqh ref="getXzqhRef" @handleGetXzqh="handleGetXzqh"></GetXzqh>
  </div>
</template>

<script>
import { addZczyYh, checkZczyYhbmmc } from "@/api/sjwh/zczy.js";
import { getUserInfo } from "@/utils/utilInfo.js";
import { getDictCombo } from '@/api/tools/dict.js';
import { checkSpecialKey, compareDate } from '@/utils/validate.js';
import GetXzqh from "@/dialogCommom/GetXzqh";
import { currentDate } from '@/utils/moment.js';
export default {
    data() {
        const that = this
        // 用户编码验证
        const checkYhbm = (rule, value, callback) => {
          if (value) {
            if (checkSpecialKey(value)) {
                let yhbm = that.preyhbm + that.addForm.nextyhbm
                let vo = {
                    dwbm: that.addForm.dwbm,
                    yhbm: yhbm,
                    zcrq: that.addForm.zcrq
                }
                checkZczyYhbmmc(vo).then(res => {
                    if (res.code == 0 && res.data) {
                        callback()
                    } else {
                        callback('用户编码重复')
                    }
                })
            } else {
                callback('禁止输入`~!#$%^&*特殊字符')
            }
          } else {
            callback('请输入用户编码')
          }         
        }
        // 用户名称验证
        const checkYhmc = (rule, value, callback) => {
            if (value) {
                if (checkSpecialKey(value)) {
                    let vo = {
                        dwbm: that.addForm.dwbm,
                        yhmc: that.addForm.yhmc,
                        zcrq: that.addForm.zcrq
                    }
                    checkZczyYhbmmc(vo).then(res => {
                        if (res.code == 0 && res.data) {
                            that.yhmcRepeat = false
                        } else {
                            that.yhmcRepeat = true
                        }
                        callback()
                    })
                } else {
                    callback('禁止输入`~!#$%^&*特殊字符')
                }
            } else {
                callback('请输入用户名称')
            }
        }
        /* 变容器容量验证 */
        const checkBrl = (rule, value, callback) => {
            let val = value + ''
            if (val) {
                if (/^([1-9]{1})([0-9]{0,9})$/.test(val)) {
                    callback()
                } else {
                    callback('1~10位数字且不能为0')
                }
            } else {
                callback('请输入变压器容量')
            }
        }
        /* 变压器台数验证 */
        const checkBts = (rule, value, callback) => {
            if (that.addForm.yhxzm == '1') {
                callback()
            } else {
                let val = value + ''
                if (val) {
                    if (/^([1-9]{1})([0-9]{0,3})$/.test(val)) {
                        callback()
                    } else {
                        callback('1~4位数字且不能为0')
                    }
                } else {
                    callback('请输入变容器台数')
                }
            }            
        }
        /* 专用设备容量验证 */
        const checkZysbr = (rule, value, callback) => {
            if (that.addForm.yhxzm == '2') {
                let val = value + ''
                if (val) {
                    if (/(^([1-9]{1})([0-9]{0,9})$)|(^0$)/.test(val)) {
                        if (that.addForm.zysbs != '0') {
                            if (val == '0') {
                                callback('1~10位数字且不能为0')
                            } else {
                                callback()
                            }
                        } else {
                            callback()
                        }
                    } else {
                        callback('1~10位数字且首位数不为0')
                    }
                } else {
                    callback('请输入专用设备容量')
                }
            } else {
                callback()
            }            
        }
        /* 专用设备台数验证 */
        const checkZysbs = (rule, value, callback) => {
            if (that.addForm.yhxzm == '2') {
                let val = value + ''
                if (val) {
                    if (/(^([1-9]{1})([0-9]{0,3})$)|(^0$)/.test(val)) {
                        if (val == '0') {
                            that.addForm.zysbr = '0'
                        }
                        callback()
                    } else {
                        callback('1~4位数字且首位数不为0')
                    }
                } else {
                    callback('请输入专用设备台数')
                }
            } else {
                callback()
            }            
        }
        /* 低压用户数验证 */
        const checkDyyhs = (rule, value, callback) => {
            if (that.addForm.yhxzm == '1') {
                let val = value + ''
                if (val) {
                    if (/(^([1-9]{1})([0-9]{0,9})$)|(^0$)/.test(val)) {
                        callback()
                    } else {
                        callback('1~10位数字且首位数不为0')
                    }
                } else {
                    callback('请输入低压用户数')
                }
            } else {
                callback()
            }            
        }
        /* 载容比验证 */
        const checkZrb = (rule, value, callback) => {
            let val = value + ''
            if (val) {
                let reg = /^(0[\.]{1}[0-9]{1,4}$)|(^1$)/
                if (reg.test(val)) {
                    callback()
                } else {
                    callback('精度：小数点后4位且不大于1')
                }
            } else {
                callback('请输入载容比')
            }
        }
        /* 用户描述验证 */
        const checkYhms = (rule, value, callback) => {
            if (value) {
                if (checkSpecialKey(value)) {
                    callback()
                } else {
                    callback('禁止输入`~!#$%^&*特殊字符')
                }
            } else {
                callback()
            }
        }
        return {
            show: false,
            addForm: {
                dwbm: '', // 单位编码
                xdbm: '', // 线段编码
                xdmc: '', // 线段名称
                yhbm: '', // 用户编码
                yhmc: '', // 用户名称
                dqtz: '市区', // 地区特征
                dqtzm: '2', // 地区特征码
                ghtz: 'A', // 规划特征
                xzqh: '', // 行政区划
                xzqhm: '', // 行政区划码   
                yhxz: '公用', // 用户性质
                yhxzm: '1', // 用户性质码
                tyrq: '', // 投运日期
                zcrq: '', // 注册日期
                issdy: '0', // 是否双电源
                sdyrl: '0', // 双电源容量
                brl: '', // 变压器容量
                bts: '1', // 变压器台数
                zysbr: '0', // 专用设备容量
                zysbs: '0', // 专用设备台数
                zrl: '0', // 用户总容量
                dyyhs: '', // 低压用户数
                zrb: '0.33', // 载容比
                yhms: '', // 用户描述
                czy: getUserInfo.userName, // 操作员
                xdId: '', // 线段id
                nextyhbm: '' // 用户编码自由编辑部分
            },
            xd_zcrq: '',
            addRules: {
                nextyhbm: [
                    { required: true, validator: checkYhbm, trigger: 'blur'},
                ],
                yhmc: [
                    { required: true, validator: checkYhmc, trigger: 'blur'},
                ],
                ghtz: [
                    { required: true, message: '请选择规划特征', trigger: 'blur' }
                ],
                dqtzm: [
                    { required: true, message: '请选择地区特征', trigger: 'blur' }
                ],
                xzqh: [
                    { required: true, message: '请选择行政区划', trigger: 'blur' }
                ],
                yhxzm: [
                    { required: true, message: '请选择用户性质', trigger: 'blur' }
                ],
                zcrq: [
                    { required: true, message: '请选择注册日期', trigger: 'blur' }
                ],
                issdy: [
                    { required: true, message: '请选择是否为双电源', trigger: 'blur' }
                ],
                brl: [
                    { validator: checkBrl, trigger: 'blur' }
                ],
                bts: [
                    { validator: checkBts, trigger: 'blur' }
                ],
                zysbr: [
                    { validator: checkZysbr, trigger: 'blur' }
                ],
                zysbs: [
                    { validator: checkZysbs, trigger: 'change' }
                ],
                dyyhs: [
                    { validator: checkDyyhs, trigger: 'blur' }
                ],
                zrb: [
                    { validator: checkZrb, trigger: 'blur' }
                ],
                yhms: [
                    { validator: checkYhms, trigger: 'blur' }
                ]
            },
            dqtzDict: 'dict_dqtz', // 地区特征字典分类值
            ghtzDict: 'dict_ghtz', // 规划特征字典分类值
            yhxzDict: 'dict_yhxz', // 用户性质字典分类值
            dqtzOptions: [], // 地区特征下拉框数据
            ghtzOptions: [], // 规划特征下拉框数据
            yhxzOptions: [], // 用户性质下拉框数据
            issdyOptions: [ // 是否为双电源下拉框数据
                {
                    value: '0',
                    text: '否'
                },
                {
                    value: '1',
                    text: '是'
                }
            ],
            screenHeight: 0, // 屏幕高度
            yhmcRepeat: false, // 用户名称是否重复
            pickerDate: { // 投运日期、注册日期选择不能超过当前日期
                disabledDate: time => {
                    return (
                        time.getTime() > new Date()
                    );
                }
            }
        }
    },

    computed: {
        zrl() {
            const that = this
            let zrl = 0
            if (that.addForm.brl) {
                zrl = zrl + parseInt(that.addForm.brl, 10)
            }
            if (that.addForm.zysbr) {
                zrl = zrl + parseInt(that.addForm.zysbr, 10)
            }
            return zrl
        },
        brl2000() {
            const that = this
            let zrl = 0
            let number = 0
            if (that.addForm.brl) {
                zrl = zrl + parseInt(that.addForm.brl, 10)
            }
            if (that.addForm.zysbr) {
                zrl = zrl + parseInt(that.addForm.zysbr, 10)
            }
            if (that.addForm.bts) {
                number = number + parseInt(that.addForm.bts, 10)
            }
            if (that.addForm.zysbs) {
                number = number + parseInt(that.addForm.zysbs, 10)
            }
            number = number * 2000
            if (zrl > number) {
                return true
            } else {
                return false
            }
        },
        sdyrl() {
            const that = this
            let sdyrl = 0
            if (that.addForm.issdy == '1') {
                sdyrl = that.zrl
            }
            return sdyrl
        },
        preyhbm() {
            const that = this
            if (that.addForm.xdbm) {
                return that.addForm.xdbm.substring(0,5)
            } else {
                return ''
            }
        }
    },

    props: {
        propAddData: {
            type: Object,
            default: function() {
                return {};
            }
        }
    },

    watch: {
        propAddData: {
            deep: true,
            handler(newVal, oldVal) {
                if (newVal.show) {
                    const that = this
                    that.show = newVal.show
                    that.addForm.dwbm = newVal.dwbm
                    that.addForm.xdbm = newVal.xdbm
                    that.addForm.xdmc = newVal.xdmc
                    that.addForm.xdId = newVal.xdId
                    that.addForm.tyrq = currentDate()
                    that.addForm.zcrq = currentDate()
                    that.xd_zcrq = newVal.xd_zcrq
                }
            }
        }
    },

    mounted() {
        const that = this
        let pam1 = {typeCode: that.yhxzDict}
        let pam2 = {typeCode: that.dqtzDict}
        let pam3 = {typeCode: that.ghtzDict}
        let res1 = getDictCombo(pam1)
        let res2 = getDictCombo(pam2)
        let res3 = getDictCombo(pam3)
        Promise.all([res1, res2, res3]).then(result => {
            that.yhxzOptions = result[0].data
            that.dqtzOptions = result[1].data
            that.ghtzOptions = result[2].data
        }).catch(reason => {
            console.log(reason)
        })
        that.screenHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6
        window.addEventListener('resize', that.onResize)
    },

    beforeDestroy() {
        window.removeEventListener("resize", this.onResize)
    },

    components: {
      GetXzqh
    },

    methods: {
        /**关闭弹窗 */
        handleClose() {
            const that = this
            that.show = false;
            that.addForm = {
                dwbm: '',
                xdbm: '',
                xdmc: '',
                yhbm: '',
                yhmc: '',
                dqtz: '市区',
                dqtzm: '2',
                ghtz: 'A',
                xzqh: '',
                xzqhm: '',  
                yhxz: '公用',
                yhxzm: '1',
                tyrq: '',
                zcrq: '',
                issdy: '0',
                sdyrl: '0',
                brl: '',
                bts: '1',
                zysbr: '0',
                zysbs: '0',
                zrl: '0',
                dyyhs: '',
                zrb: '0.33',
                yhms: '',
                czy: getUserInfo.userName,
                xdId: '',
                nextyhbm: ''
            }
        },

        /**确定 */
        confirm() {
            const that = this
            that.$refs['addForm'].validate(valid => {
                if (valid) {
                    if (compareDate(that.addForm.tyrq, that.addForm.zcrq)) {                  
                        that.$message.warning('注册日期不小于投运日期')
                        return false
                    }
                    // if (compareDate(that.addForm.tyrq, that.xd_zcrq)) {                  
                    //     that.$message.warning('用户投运日期不大于线段注册日期')
                    //     return false
                    // }
                    if (compareDate(that.xd_zcrq, that.addForm.zcrq)) {                  
                        that.$message.warning(`用户注册日期不小于线段注册日期${that.xd_zcrq}`)
                        return false
                    }
                    if (that.brl2000) {
                        that.$confirm('单台变压器容量超过2000kVA, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            that.yhmcConfirm()
                        }).catch(() => {
                            console.log('已取消')         
                        });
                    } else {
                        that.yhmcConfirm()
                    } 
                }
            })
        },
        yhmcConfirm() {
            const that = this
            if (that.yhmcRepeat) {
                that.$confirm('用户名称重复, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    that.dyyhsConfirm()
                }).catch(() => {
                    console.log('已取消')         
                });
            } else {
                that.dyyhsConfirm()
            }
        },
        dyyhsConfirm() {
            const that = this
            if (that.addForm.yhxzm == '2') {
                let num = parseInt(that.addForm.dyyhs, 10)
                if (num > 0) {
                    that.$confirm('用户性质为专用时低压用户数大于0, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        that.addZczyYh()
                    }).catch(() => {
                        console.log('已取消')         
                    });
                } else {
                    that.addZczyYh()
                }
            } else {
                that.addZczyYh()
            }
        },
        async addZczyYh() {
            const that = this
            that.addForm.zrl = that.zrl
            that.addForm.sdyrl = that.sdyrl
            that.addForm.yhbm = that.preyhbm + that.addForm.nextyhbm
            let zcZyyhsj = that.addForm
            let res = await addZczyYh({zcZyyhsj})
            if (res.code == 0 && res.data) {
                that.$message.success('中压注册用户新增成功')
                that.$emit("updateZczyYhTable")
                that.handleClose()
            } else {
                that.$message.error(res.message)
            }
        },

        /* 选择地区特征 */
        dqtzChange(val) {
            const that = this
            that.dqtzOptions.forEach(item => {
                if (item.value == val) {
                    that.addForm.dqtz = item.text
                }
            })
        },

        /* 选择用户性质 */
        yhxzChange(val) {
            const that = this
            that.yhxzOptions.forEach(item => {
                if (item.value == val) {
                    that.addForm.yhxz = item.text
                }
            })
            if (val == '1') {
                that.addForm.bts = '1'
                that.addForm.zysbr = '0'
                that.addForm.zysbs = '0'
                that.addForm.dyyhs = ''
            } else {
                that.addForm.dyyhs = '0'
                that.addForm.bts = ''
            }
        },

        /* 选择行政区划 */
        selectXzqh() {
          const that = this
          that.$refs.getXzqhRef.openXzqh()
        },

        /* 行政区划选择组件回传 */
        handleGetXzqh(val) {
          const that = this
          that.addForm.xzqh = val.name
          that.addForm.xzqhm = val.code
        },

        /* 屏幕缩放 */
        onResize() {
            this.screenHeight = (document.documentElement.clientHeight || document.body.clientHeight) * 0.6
        }
  }
};
</script>
<style lang='scss' scoped>
.addForm /deep/ .el-form-item {
    margin-bottom: 20px;
}
.addForm /deep/ .el-date-editor.el-input {
    width: 100%;
}
.addForm /deep/ .el-select {
    width: 100%;
}
/deep/ .el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
/deep/ .el-dialog__footer{
  padding: 5px 10px 5px;
}
/deep/ .el-dialog__header{
  padding: 4px 10px 4px;
  line-height: 30px;
}
/deep/ .el-dialog__headerbtn{
  top: 10px;
}
/deep/ .el-dialog__body {
    padding: 10px 20px 1px;
}
.center {
    height: 1px;
}
/deep/ .el-scrollbar__wrap {
    overflow-y: auto;
    overflow-x: hidden;
}
// /deep/ .el-scrollbar__thumb {background: transparent;}
.selectXzqh {
  padding-left: 10px;
}
.selectXzqh /deep/ .el-button--primary {
  width: 100%;
}
</style>
